<template>
  <div>
      <!-- 查询条件 -->
        <div class="orderactivity-header">
          <!-- <el-button  type="primary" icon="el-icon-plus" @click="fenpei">分配送餐员</el-button> -->
          <div>分配订单-{{ data.team_name }}</div>
          <i class="el-icon-close" style="font-size: 20px; color: #72767b;float: right;margin-top: -20px;cursor: pointer;" @click="close"></i>
        </div>
      <el-divider></el-divider>
      <div class="contacts-content">
        <!-- Table组件 -->
        <main-table :columns="columns" :data="tableList" :pagination="pagination" @getData="fetchTableList" :loading="loading" wrapperHeight="100%" height="calc(100vh - 190px)">
          <!-- wrapperHeight：父元素高度根据实际布局情况配置，大多情况可能是 外层祖父元素高度 减去 其他兄弟元素的高度，如果外层祖父元素高度或者兄弟元素的高度不固定，可能需要借助 js来计算 -->
          <el-table-column slot="action" fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" class="button-edit-color" @click="fenpei(scope.row)"> 确认分配</el-button>
            </template>
          </el-table-column>
        </main-table>
      </div>
  </div>
</template>

<script>
import mainTable from "@/components/main-table/index";
import { sex, age } from "@/utils"
// import * as APIAdmin from '@/api/admin'
import * as APIOrder from '@/api/order'
import { mapState } from 'vuex'
import { servicerList, servicerAssignlist } from "@/api/oldermanager";
export default {
  name: 'fenpei-list',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    mainTable
  },
  data () {
    return {
      title: '添加家属',
      // 添加家属表单
      dialogVisible: false,
      // 表格loading
      loading: false,
      // 员工列表
      tableList: [],
      columns: [
        {
          index: true,
          fixed: true
        },
        {
          prop: 'name',
          label: '员工姓名',
          fixed: true
        },
        {
          prop: 'sex',
          label: '性别',
          formatter (row, column, cellValue) {
            return sex(cellValue)
          }
        },
        {
          prop: 'age',
          label: '年龄'
        },
        {
          prop: 'mobile',
          label: '手机号'
        },
        {
          prop: 'role_name',
          label: '员工角色'
        },
        {
          slot: 'action'
        }
      ],
      pagination: {
        current: 1,
        size: 15,
        total: 0
      }
    }
  },
  mounted () {
    this.fetchTableList()
  },
  methods: {
    fenpei (row) {
      APIOrder.orderFenpei({ servicer_id: row.id, id: this.data.id }).then(res => {
        this.close(1)
      })
    },
    // 添加后重载
    load () {
      this.fetchTableList();
    },
    // 获取数据
    fetchTableList (pageObj) {
      this.loading = true
      this.searchForm = {
        ...this.searchForm,
        ...pageObj,
        ...{ team_id: this.data.team_id }
      }
      console.log(this.searchForm)
      servicerList("get", this.searchForm).then((resp) => {
        this.loading = false;
        if (resp.code === 200) {
          const { list = [], total = 0 } = resp.data;
          this.tableList = list || [];
          this.pagination.total = total;
        }
      });
    },
    close (type) {
      this.$emit('close', type)
    }
  }
}
</script>

<style lang="scss" scoped>
  .assign-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
  .orderactivity-header{
     padding: 25px 20px 10px;
  }
  .contacts-content {
   padding: 0 20px;
   padding-bottom: 7px;
  }
</style>
